<template>
  <div class="login-page">
    <div class="login-content">
      <van-nav-bar>
        <template #title>
          <div class="title">匿名聊天室</div>
        </template>
      </van-nav-bar>
      <van-form @submit="handleLogin">
        <div
          class="login-logo"
          style="
            display: flex;
            justify-content: center;
            padding: 10px 0px;
            position: relative;
            padding-top: 20px;
          "
        >
          <van-image round width="80" height="80" :src="userAvatar">
          </van-image>
          <div
            style="
              position: absolute;
              top: 45px;
              z-index: 100;
              left: calc(100% / 2 + 50px);
            "
          >
            <van-icon
              name="replay"
              style="color: #999999; font-size: 18px"
              @click="radomUserAvatar"
            />
          </div>
        </div>
        <van-cell-group title="点击刷新图标，选择你喜欢的用户名~">
          <van-field
            v-model="userName"
            name="username"
            label="用户名"
            placeholder="用户名"
            maxlength="5"
            :rules="[{ required: true, message: '请填写用户名' }]"
          >
            <template #right-icon>
              <van-icon name="replay" @click="radomUserName" />
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button :loading="loginLoading" block type="primary" native-type="submit"
            >登 录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  getCurrentInstance,
  onMounted,
} from "vue";
import { ElMessage } from "element-plus";
import { login } from "@/api/user";
import { useSocket } from "@/utils/socket/useSocket";
import MySender from "@/utils/socket/MySender";
import MsgCommand from "@/utils/socket/enums/MsgCommand";

export default defineComponent({
  setup(props: any, { emit }: any) {
    const state = reactive({
      userName: "",
      userAvatar: "",
      users: [
        "郭靖",
        "黄蓉",
        "杨康",
        "穆念慈",
        "洪七公",
        "欧阳锋",
        "黄药师",
        "周伯通",
        "王重阳",
        "一灯大师",
        "裘千仞",
        "裘千丈",
        "梅超风",
        "陈玄风",
        "陆乘风",
        "曲灵风",
        "冯默风",
        "程瑶迦",
        "郭啸天",
        "李萍",
        "杨铁心",
        "包惜弱",
        "完颜洪烈",
        "华筝",
        "拖雷",
        "哲别",
        "丘处机",
        "马钰",
        "王处一",
        "刘处玄",
        "郝大通",
        "孙不二",
        "尹志平",
        "赵志敬",
        "陆冠英",
        "程瑶迦",
        "瑛姑",
        "周伯通",
        "裘千仞",
        "裘千丈",
        "梅超风",
        "陈玄风",
        "陆乘风",
        "曲灵风",
        "冯默风",
        "李寻欢",
        "林诗音",
        "龙啸云",
        "阿飞",
        "上官金虹",
        "荆无命",
        "林仙儿",
        "郭嵩阳",
        "孙小红",
        "铁传甲",
        "百晓生",
        "练霓裳",
        "卓一航",
        "岳鸣珂",
        "铁珊瑚",
        "红花鬼母",
        "慕容冲",
        "金独异",
        "铁飞龙",
        "玉罗刹",
        "凌云凤",
        "霍天都",
        "霍青桐",
        "霍天青",
        "霍天云",
        "霍天翔",
        "霍天鹏",
        "霍天鹰",
      ],
      avatars: [
        "image/avatar/戴眼睛老鼠.svg",
        "image/avatar/戴眼镜的猫.svg",
        "image/avatar/害羞超人.svg",
        "image/avatar/坏坏金刚狼.svg",
        "image/avatar/卡通豹IP.svg",
        "image/avatar/卡通狐狸IP.svg",
        "image/avatar/可爱蝙蝠侠.svg",
        "image/avatar/可爱超人贴纸.svg",
        "image/avatar/可爱雷神.svg",
        "image/avatar/可爱美国队长.svg",
        "image/avatar/可爱蜘蛛侠.svg",
        "image/avatar/酷酷蝙蝠侠.svg",
        "image/avatar/雷神.svg",
        "image/avatar/美国队长.svg",
        "image/avatar/萌萌绿巨人.svg",
        "image/avatar/时尚狮子IP.svg",
        "image/avatar/时尚帅气老鼠.svg",
      ],
      loginLoading: false,
    });

    const radomUserName = () => {
      state.userName =
        state.users[Math.floor(Math.random() * state.users.length)];
    };

    const radomUserAvatar = () => {
      state.userAvatar =
        state.avatars[Math.floor(Math.random() * state.avatars.length)];
    };

    const handleLogin = async () => {
      state.loginLoading = true;
      if (state.userName === "") {
        state.loginLoading = false;
        ElMessage.error("用户名不能为空！");
        return false;
      }

      let res = await login({
        userName: state.userName,
        userAvatar: state.userAvatar,
      });
      if (res.status == 0) {
        loginSuccess(res.data);
      } else {
        state.loginLoading = false;
        ElMessage.error(res.message);
      }
    };
    const loginSuccess = (data) => {
      const { initSocketFun, chatStatus } = useSocket();
      initSocketFun();
      const toLogin = (data) => {
        MySender.getInstance().sendMsg(MsgCommand.USER_LOGIN, {
          userId: data.userId,
          userName: data.userName,
          avatar: data.userAvatar,
        });
      };
      localStorage.setItem("token", data.tokenStr);
      setTimeout(() => {
        toLogin(data);
      }, 100);
    };

    onMounted(() => {
      radomUserName();
      radomUserAvatar();
    });

    return {
      ...toRefs(state),
      radomUserName,
      radomUserAvatar,
      handleLogin,
      loginSuccess,
    };
  },
});
</script>

<style lang="less" scoped>
.login-page {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  background-image: url("/image/1.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;
  .login-content {
    margin: auto;
    padding: 10px 10px 20px 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
    .title {
      font-size: 18px;
      font-weight: 500;
    }
  }

  .link {
    font-size: 12px;
    color: #069;
    float: right;
    margin-right: 15px;
  }
}
</style>
